﻿import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


export default new Vuex.Store({
    //所有的状态（组件共用的数据）
    state:{
        count:0,
        name:'lucy'
    },
    // 数据的中间加工，类型过滤
    getters:{
        upperName(state){
            return '【' + state.name + '】'
        }
    },
    // mutation:改变、突变
    // 可以执行mutation中的方法实现状态的改变
    // 同步的
    mutations:{
        // para1：state状态
        // para2：传递过来的数据
        add(state,payload){
            console.log(payload)
            state.count += payload ||1
        },
        minus(state,payload){
            state.count -= payload||1
        }
    },
    // 异步操作
    actions:{
        // context：上下文，指代当前store对象
        add(context,param){
            setTimeout(()=>{
                // 修改state，依旧需要提交mutations
                context.commit('add',param)
            }, 2000);
        }
    }
})
// vuex是配合vue框架的一个状态管理模式；可以集中管理项目的组件中使用到的状态
// 使用vuex的步骤
// 1、npm install vuex --save
// 2、Vue.use(Vuex)
// 3、新建一个Store对象
// 4、state字段 存储状态 mutations字段，改变状态
// 5、需要将Store对象添加到项目的根组件中；
// 添加之后，项目的所有组件中都会被添加一个$store对象，通过这个对象可以访问Store中的状态